@import "../common/constants";
@import "../common/header";
@import "../common/body";
@import "../common/footer";

.main{
  .wrapper{
    .container-wrapper{
      .main-wrapper{
        .search-group{
          width: $mainBoxWidth;
          background-color: #fff;
          box-sizing: border-box;
          padding: 20px;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          border-bottom: 1px solid $lineColor;

          .search-input{
            float: left;
            border: 1px solid $mainFontColor;
            height: 40px;
            flex: 1;
            margin-right: 20px;
            border-radius: 5px;
            padding: 0 10px;
          }

          .search-btn{
            float: right;
            width: 100px;
            height: 40px;
            background-color: $themeColor;
            cursor: pointer;
            color: white;
            border-radius: 5px;
          }
        }

        .ret-list{
          background-color: #fff;
          padding-top: 5px;

          li {
                            padding: 20px;
                            overflow: hidden;
                            border-bottom: 1px solid $lineColor;

                            .thumbnail-group {
                                float: left;
                                width: 226px;
                                height: 162px;

                                a {
                                    img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }

                            .article-group {
                                float: right;
                                width: 504px;
                                height: 162px;
                                position: relative;

                                .title {
                                    font-size: 22px;

                                    a {
                                        color: $mainFontColor;

                                        &:hover {
                                            color: $themeColor;
                                        }
                                    }
                                }

                                .desc {
                                    color: $assistFontColor;
                                    font-size: 14px;
                                    margin-top: 10px;
                                }

                                .more {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    color: $assistFontColor;

                                    .category {
                                        color: $themeColor;
                                    }

                                    .pub-time {
                                        float: right;
                                        margin-left: 20px;
                                    }

                                    .author {
                                        float: right;
                                    }
                                }
                            }
                        }
        }
      }
    }
  }
}
